const webpack = require('webpack')
// 全局主题颜色修改
// https://www.npmjs.com/package/webpack-theme-color-replacer
const ThemeColorReplacer = require('webpack-theme-color-replacer')
// gzip
// https://www.npmjs.com/package/compression-webpack-plugin
const CompressionPlugin = require('compression-webpack-plugin')
// 压缩文件
const productionGzipExtensions = ['js', 'css']
// 判断生产环境
const isProd = process.env.NODE_ENV === 'production'
// CDN 加速
const assetsCDN = {
  // webpack build externals
  externals: {
    vue: 'Vue',
    vuex: 'Vuex',
    axios: 'axios',
    nprogress: 'NProgress',
    clipboard: 'ClipboardJS',
    'js-cookie': 'Cookies',
    'vue-router': 'VueRouter',
    '@antv/data-set': 'DataSet',
  },
  css: [],
  js: [
    '//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
    '//cdn.jsdelivr.net/npm/vue-router@3.3.4/dist/vue-router.min.js',
    '//cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js',
    '//cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
    '//cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js',
    '//cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js',
    '//cdn.jsdelivr.net/npm/@antv/data-set@0.11.4/build/data-set.min.js',
    '//cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js',
  ],
}
// 全局路径
const path = require('path')
module.exports = {
  // 输出文件目录
  outputDir: 'dist',
  // 设置放置打包生成的静态资源 (js、css、img、fonts) 的目录
  assetsDir: 'static',
  // 基本路径
  publicPath: './',
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: true,
  // 如果这个值是一个对象，则会通过  webpack-merge合并到最终的配置中
  // 如果这个值是一个函数，则会接收被解析的配置作为参数。该函数可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本
  configureWebpack: (config) => {
    const themeColorReplacer = new ThemeColorReplacer({
      fileName: 'css/theme-colors-[contenthash:8].css', // build 输出CSS文件名
      //   matchColors: getThemeColors(), // 颜色值数组
      // 将css文本注入js文件，不再需要下载'theme-colors-xxx.css'
      injectCss: true,
      //  如果你的js被丑化了，设置为“true”。 默认值由process.env.NODE_ENV设置
      isJsUgly: process.env.NODE_ENV !== 'development',
    })
    config.plugins.push(themeColorReplacer)
    // 在webpack打包时忽略本地化内容
    config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))

    if (isProd) {
      // gzip
      const compression = new CompressionPlugin({
        // 压缩算法
        algorithm: 'gzip',
        // 所有匹配该正则的资源都会被处理。默认值是全部资源
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        // 只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0
        threshold: 10240,
        // 只有压缩率小于这个值的资源才会被处理。默认值是 0.8
        minRatio: 0.8,
      })
      config.plugins.push(compression)
      // cdn
      config.externals = assetsCDN.externals
    }
  },
  // 是一个函数，会接收一个基于  webpack-chain的ChainAbleConfig实例。允许对内部的webpack配置进行更细粒度的修改
  chainWebpack: (config) => {
    if (isProd) {
      // 优化与主题色冲突问题
      config.plugin('optimize-css').tap((args) => {
        args[0].cssnanoOptions.preset[1].colormin = false
        return args
      })
      // CDN
      config.plugin('html').tap((args) => {
        args[0].cdn = assetsCDN
        return args
      })
    }
  },
  // 第三方插件
  pluginOptions: {
    // 设置全局样式
    'style-resources-loader': {
      preProcessor: 'less', // 预处理程序
      patterns: [path.resolve(__dirname, './src/theme/theme.less')], // 样式
    },
  },
  css: {
    loaderOptions: {
      less: {
        // 允许链式调用的换行
        javascriptEnabled: true,
      },
    },
  },
}
